/**
 * 配置生产环境常用的配置: 让生产代码、更稳、性能更好、更安全
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 *
 *    JS兼容性问题: babel-loader @babel/core
 *    1.基本js兼容性处理 -->  @babel/preset-env
 *        ·下载依赖 npm i babel-loader @babel/core @babel/preset-env -D
 *        配置
 *     问题: 只能转换基本语法, () => {} 箭头函数可以转换, 但是promise高级语法不能转换
 *
 *    2.全部js兼容性处理 -->  @babel/polyfill
 *        ·下载依赖 npm i babel-loader @babel/core @babel/preset-env @babel/polyfill -D
 *        配置
 *      问题: 我只需要解决部分兼容性问题, 但是将所有兼容性代码全部引入, 体积太大了
 *
 *    3.按需加载js兼容性处理 --> core-js
 *        ·下载依赖 npm i babel-loader @babel/core @babel/preset-env core-js -D
 *
 */


const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {resolve} = require('path');
// 将 css提取到单独文件/处理css兼容性问题 抽取为一个公共变量, 供css/less/scss复用
const commonCssLoader = [
  {
    // 'style-loader', // 创建style标签, 将样式放入
    // 这个loader取代style-loader.  作用: 提取js中的css成单独文件, 所以style-loader就不需要了
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  },
  'css-loader', // 将css文件整合到js文件中
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]
// process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      // js兼容性处理: babel-loader @babel/preset-env
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设: 指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '60',
                  edge: '60'
                }
              }
            ]
          ]
        }
      },
      // 配置css
      {
        test: /\.(css)$/,
        use: [...commonCssLoader],
        // Tips: 样式并没有输出到一个单独的css文件中, 而是输出到js/built.js中, 以字符串的形式存在的
        // Tips: 由于使用了 MiniCssExtractPlugin.loader 将css单独生成文件了, 可以在使用插件传入参数, 设置路径和文件名
        // options: {
        //   outputPath: 'css'
        // }
      },
      // 配置less
      {
        test: /\.(less)$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      // 配置图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1000,
          name: '[hash:8].[ext]',
          // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
          esModule: false,
          // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
          outputPath: 'img'
        }
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        options: {
          name: '[hash:8].[ext]',
        }
      },
      // 配置其他资源, 如字体
      {
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({
    template: "./src/index.html"
  }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/app.css'
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true
  }
}
